<template>
  <el-menu
    :default-active="$route.fullPath"
    class="el-menu-vertical-demo"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b"
    :router="true"
    :collapse="sidebar"
  >
    <el-submenu v-for="item in routes" :index="item.path" :key="item.path">
      <template slot="title">
        <i class="iconfont" :class="item.meta.icon"></i>
        <span>{{ item.meta.title }}</span>
      </template>
      <el-menu-item
        v-for="i in item.children"
        :index="item.path + '/' + i.path"
        :key="item.path + '/' + i.path"
        v-show="item.meta.type == type || type == 1"
        >{{ i.meta.title }}</el-menu-item
      >
    </el-submenu>
  </el-menu>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "MyNav",
  data() {
    return {
      routes: [],
    };
  },
  computed: {
    ...mapGetters(["sidebar"]),
  },
  mounted() {
    console.log(this.$router);
    this.$router.options.routes.forEach((item) => {
      if (item.meta) {
        this.routes.push(item);
      }
    });
  },
};
</script>

<style lang="scss" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.iconfont {
  margin-right: 5px;
}
</style>